<%--
  Created by IntelliJ IDEA.
  User: 朱志俊
  Date: 2021/9/16
  Time: 11:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <style>
        .tip{
            color: red;
            font-size: 12px;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/banner.js"></script>
    <script type="text/javascript" src="js/clickNum.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("ul.typeul .typeone").click(function()
            {
                var arrow = $(this).find("span.arrow");
                if(arrow.hasClass("up"))
                {
                    arrow.removeClass("up");
                    arrow.addClass("down");
                }
                else if(arrow.hasClass("down"))
                {
                    arrow.removeClass("down");
                    arrow.addClass("up");
                }
                $(this).parent().find(".typetwo").slideToggle();
            });
        });

        window.onload=function () {
            //获取用户名错误提示span标签
            var usernameErrorSpan = document.getElementById("usernameError");
            //给用户名绑定blur事件
            var usernameElt = document.getElementById("username");
            //usernameElt.onblur =
                function checkUsername() {
                var username = usernameElt.value;
                username = username.trim();
                if (username === "") {
                    usernameErrorSpan.innerText = "用户名不能为空";
                    return false;
                } else {
                    //用户名不为空
                    //username不为空,继续判断长度【6-14】
                    if (username.length < 3 || username.length > 14) {
                        //用户名长度是否合法
                        usernameErrorSpan.innerHTML = "用户名长度不合法"
                        return false;
                    } else {
                        //用户名长度合法
                        //用户名是否有非法字符出现
                        var reqExp = /^[A-Za-z0-9]+$/;
                        var ok = reqExp.test(username);
                        if (ok) {
                            //用户名最终合法
                            usernameErrorSpan.innerText="";
                        } else {
                            //用户名最终不合法
                            usernameErrorSpan.innerText = "用户名格式不合法";
                            return false;
                        }
                    }
                }
                return true;
            }
            //给username这个文本框绑定焦点事件
            usernameElt.onfocus=function (){
                if(usernameErrorSpan.innerText!=""){
                    usernameElt.value=""
                }
                usernameErrorSpan.innerText="";
            }


            //获取内容错误提示span标签
            var contentErrorSpan = document.getElementById("contentError");
            //给内容绑定blur事件
            var contentElt = document.getElementById("content");
            /*contentElt.onblur = */
                function checkContent() {
                var content = contentElt.value;
                content = content.trim();
                if (content === "") {
                    contentErrorSpan.innerText = "内容不能为空";
                    return false;
                } else {
                    contentErrorSpan.innerText="";
                }
                return true;
            }
            //给content这个文本框绑定焦点事件
            contentElt.onfocus=function (){
                if(contentErrorSpan.innerText!=""){
                    contentElt.value=""
                }
                contentErrorSpan.innerText="";
            }



            //获取手机号错误提示span标签
            var phoneErrorSpan = document.getElementById("phoneError");
            //给手机号绑定blur事件
            var phoneElt = document.getElementById("phone");
            /*phoneElt.onblur = y*/
            function checkPhone() {
                var phone = phoneElt.value;
                phone = phone.trim();
                if (phone === "") {
                    phoneErrorSpan.innerText = "手机号不能为空";
                    return false;
                } else {
                    //phone不为空,继续判断长度是否为11位
                    if (phone.length !=11) {
                        //用户名长度是否合法
                        phoneErrorSpan.innerHTML = "手机号长度必须位11位";
                        return false;
                    } else {
                        //手机号长度合法
                        //手机号是否有非法字符出现
                        var reqExp = /^[1][3,4,5,7,8][0-9]{9}$/;
                        var ok = reqExp.test(phone);
                        if (ok) {
                            //手机号最终合法
                            phoneErrorSpan.innerText="";
                        } else {
                            //手机号最终不合法
                            phoneErrorSpan.innerText = "手机号须数字组成";
                            return false;
                        }
                    }
                }
                return true;
            }
            //给username这个文本框绑定焦点事件
             phoneElt.onfocus=
                function (){
                if(phoneErrorSpan.innerText!=""){
                    phoneElt.value=""
                }
                phoneErrorSpan.innerText="";
            }



            $(function () {
                //1.给登录按钮绑定单击事件
                $("#btn_sub").click(function () {
                    if(checkUsername()&&checkContent()&&checkPhone()){

                        //2.发送ajax请求，提交表单数据
                        $.get("LeaveMessageServlet",$("#leaveMessageForm").serialize(),function (data) {
                            //data : {flag:false,errorMsg:''}
                            if(data){
                                //登录成功
                                alert("感谢您的留言!")
                            }else{
                                //登录失败
                                alert("留言失败！");
                            }
                        });
                    }else{
                        alert("请检查您输入的信息是否规范！");
                    }
                });

            });




        }







    </script>
</head>
<body>
<div class="header">
    <div class="main">
        <a href="index.jsp"><img src="images/logo.png" /></a>
    </div>
</div>
<div class="clear"></div>
<div class="nav">
    <ul>
        <li><a href="index.jsp">首页</a></li>
        <li><a href="about.jsp">关于我们</a></li>
        <li><a href="product.jsp">产品展示</a></li>
        <li><a href="news.jsp">行业动态</a></li>
        <li><a href="book.jsp">我要留言</a></li>
        <li><a href="contact.jsp">联系我们</a></li>
    </ul>
</div>
<div class="clear"></div>
<%--<div class="banner">--%>
<%--    <div class="clear"></div>--%>
<%--    <div class="b-list"> </div>--%>
<%--    <div class="b-img">--%>
<%--        <c:forEach items="${carouselList}" var="carousel">--%>
<%--            <img src="${carousel.getImg()}" width="100%"/>--%>
<%--        </c:forEach>--%>
<%--    </div>--%>
<%--</div>--%>
<div class="clear"></div>
<div class="main">
    <div class="mainL">
        <div class="titbox">产品分类</div>
        <ul class="typeul">
            <c:forEach items="${classificationList}" var="classification">
                <li>
                    <c:if test="${classification.getParent_id()==0}">
                        <div class="typeone"><a href="product.jsp">${classification.getCname()}</a><span class="arrow up"></span></div>
                        <c:forEach items="${classificationList}" var="classification2">
                            <c:if test="${classification.getId()==classification2.getParent_id()}">
                                <div class="typetwo">
                                    <a href="product.jsp">${classification2.getCname()}</a>
                                </div>
                            </c:if>
                        </c:forEach>
                    </c:if>

                </li>
            </c:forEach>
<%--            <li>--%>
<%--                <div class="typeone"><a href="product.jsp">人物画</a><span class="arrow up"></span></div>--%>
<%--                <div class="typetwo">--%>
<%--                    <a href="product.jsp">人物画</a>--%>
<%--                    <a href="product.jsp">人物画</a>--%>
<%--                    <a href="product.jsp">人物画</a>--%>
<%--                </div>--%>
<%--            </li>--%>
<%--            <li>--%>
<%--                <div class="typeone"><a href="product.jsp">花鸟画</a><span class="arrow up"></span></div>--%>
<%--                <div class="typetwo">--%>
<%--                    <a href="product.jsp">花鸟画</a>--%>
<%--                    <a href="product.jsp">花鸟画</a>--%>
<%--                    <a href="product.jsp">花鸟画</a>--%>
<%--                </div>--%>
<%--            </li>--%>
<%--            <li>--%>
<%--                <div class="typeone"><a href="product.jsp">山水画</a><span class="arrow up"></span></div>--%>
<%--                <div class="typetwo">--%>
<%--                    <a href="product.jsp">山水画</a>--%>
<%--                    <a href="product.jsp">山水画</a>--%>
<%--                    <a href="product.jsp">山水画</a>--%>
<%--                </div>--%>
<%--            </li>--%>
        </ul>
        <div class="titbox">热门资讯</div>
        <ul class="newsul">
            <c:forEach items="${newsList2}" var="news">
                <li><a href="javascript:void(0)" onclick="Clickadd(${news.getId()})" class="ccsl">${news.getTitle()}</a></li>
            </c:forEach>
<%--            <li><a href="detail.jsp" class="ccsl">字画装裱需要注意什么细节问题?</a></li>--%>
<%--            <li><a href="detail.jsp" class="ccsl">书画装裱后更应妥善保存，存放在地上要考虑防潮?</a></li>--%>
<%--            <li><a href="detail.jsp" class="ccsl">字画装裱机的选择需要注意那几点呢？</a></li>--%>
<%--            <li><a href="detail.jsp" class="ccsl">保管已经破损的古旧字画更要谨慎?</a></li>--%>
<%--            <li><a href="detail.jsp" class="ccsl">展示手绢，册页时要倍加注意?</a></li>--%>
        </ul>
        <div class="titbox">联系我们</div>
        <div class="lxwm">
            <div class="con">
                手 机：12345678910<br />
                电 话：77000000<br />
                邮箱：123***@qq.com<br />
                地 址：银河系太阳系帝王星华夏民族
            </div>
        </div>
    </div>
    <div class="mainR">
        <div class="brandnavbox">
            <h2>我要留言</h2>
            <div class="con">当前位置：首页》我要留言</div>
        </div>
        <div class="detailbox">
            <div class="xq">
                <div class="formBox" >
                    <form id="leaveMessageForm" action="">
                    <div class="inputbox">
                        <label><span>*</span>姓名</label>
                        <input name="username" type="text" id="username" placeholder="请输入姓名"/>
                            <span id="usernameError" class="tip" style="float: left"></span>
                    </div>
                    <div class="inputbox2">
                        <label><span>*</span>内容</label>
                        <textarea name="content" id="content" cols="" rows="" placeholder="请输入您要留言的内容"></textarea>
                        <span id="contentError" class="tip"></span>
                    </div>
                    <div class="inputbox">
                        <label><span>*</span>手机号</label>
                        <input name="phone" id="phone" type="text"  placeholder="请输入手机号"/>
                        <span id="phoneError" class="tip"></span>
                    </div>
                    <div class="inputbox">
                        <label><span>*</span>验证码</label>

                        <input name="" type="text"  placeholder="请输入验证码" class="yzm"/>
                        <img src="images/yzm.jpg" class="yzmimg"/>
                    </div>
                    <div class="inputbox">
                        <label></label>
                        <input id="btn_sub" type="button" value="提交" class="btn1"/>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
<div class="footerBox">
    <div class="main">
        <div class="footL">
            <div class="tit">联系我们</div>
            <ul>
                <li class="f1">手 机：12345678910</li>
                <li class="f2">电 话：77000000</li>
                <li class="f3">邮箱：123***@qq.com</li>
                <li class="f4">地 址：银河系太阳系帝王星华夏民族</li>
            </ul>
        </div>
        <div class="footR">
            <div class="telbox">
                <div class="tel">
                    <span>12345678910</span>
                    <b><p>欢迎来电咨询</p></b>
                </div>
            </div>
            <div class="footer">
                <div>水墨画有限公司<br />联系方式：12345678910<br />地 址：银河系太阳系帝王星华夏民族</div>
            </div>
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="fnav">
    <div class="main">
        <a href="index.jsp">首页</a>
        <a href="about.jsp">关于我们</a>
        <a href="product.jsp">产品展示</a>
        <a href="news.jsp">行业动态</a>
        <a href="book.jsp">我要留言</a>
        <a href="contact.jsp">联系我们</a>
    </div>
</div>
</body>
</html>
